<template>
	<view class="suggest-add">
		<view>保修信息</view>
		<view class="suggest-add-content">
			<view class="suggest-add-con-item">
				<view class="suggest-add-Ce fonColor">小区名称</view>
				<view class="suggest-add-img">
					花园国际小区
					<image src="/static/image/箭头.png" mode="scaleToFill" />
				</view>
			</view>
			<view class="suggest-add-con-item">
				<view class="suggest-add-Ce fonColor">保修类型</view>
				<view class="suggest-add-img fonColor" @click="show = true">
					选择保修类型
					<image src="/static/image/箭头.png" mode="scaleToFill" />
				</view>
			</view>

			<view class="suggest-add-con-itemList">
				<view class="suggest-add-Ce fonColor">保修内容</view>
				<view class="suggest-add-con-itemList-input">
					<uni-easyinput type="textarea" placeholder="请输入保修内容" />
				</view>
			</view>
			<view class="suggest-add-con-itemList">
				<view class="suggest-add-Ce fonColor">头像上传</view>
				<view class="suggest-add-con-itemList-input">
					<up-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="4"
						multiple></up-upload>
				</view>
			</view>

		</view>
		<view class="add_suggest_btn" @click="shadeAdd">提交</view>
		<view class="add_suggest_btn ggg" @click="navigateBack">返回</view>
		<view>
			<!-- 类型弹框 -->
			<up-modal :show="show" :title="title" :content='content'></up-modal>
		</view>
		<!-- 遮罩层 -->
		<up-overlay :show="shade">
		</up-overlay>
	</view>


</template>

<script setup>
import { ref } from 'vue'
let fileList1 = ref([{
	url: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
},
{
	url: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
}
])
let shade = ref(false)
// 创建响应式数据  
const status = ref('loadmore');

// 删除图片
const deletePic = (event) => {
	fileList1.value.splice(event.index, 1);
};
// 使用 ref 创建响应式数据  
const show = ref(false);
const title = ref('标题');
const content = ref('');

// 新增图片
const afterRead = async (event) => {
	// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
	let lists = [].concat(event.file);
	let fileListLen = fileList1.value.length;
	lists.map((item) => {
		fileList1.value.push({
			...item,
			status: 'uploading',
			message: '上传中',
		});
	});
	for (let i = 0; i < lists.length; i++) {
		const result = await uploadFilePromise(lists[i].url);
		let item = fileList1.value[fileListLen];
		fileList1.value.splice(fileListLen, 1, {
			...item,
			status: 'success',
			message: '',
			url: result,
		});
		fileListLen++;
	}
};

const uploadFilePromise = (url) => {
	return new Promise((resolve, reject) => {
		let a = uni.uploadFile({
			url: 'http://192.168.2.21:7001/upload', // 仅为示例，非真实的接口地址
			filePath: url,
			name: 'file',
			formData: {
				user: 'test',
			},
			success: (res) => {
				setTimeout(() => {
					resolve(res.data.data);
				}, 1000);
			},
		});
	});
};

let shadeAdd = () => {
	status.value = 'loading';
	shade.value = true;
	uni.showLoading({
		title: '正在提交，请稍后',
		mask: true
	});
	setTimeout(() => {
		shade.value = false;
		uni.hideLoading();
		// navigateBack()
		uni.showToast({
			title: '提交成功',
			duration: 1000
		});
		setTimeout(() => {
		    navigateBack()
		},1000)
		
	}, 2000);
}

let navigateBack = () => {
	uni.navigateBack()
}
</script>

<style lang="scss" scoped>
.suggest-add {
	height: calc(100vh - 130rpx);
	background-color: #f5f5f5;
	padding: 20rpx;
	font-family: '微软雅黑', sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 24rpx;
}

.suggest-add-content {
	margin-top: 20rpx;
	background-color: #fff;
	border: #f5f5f5 1rpx solid;
	box-shadow: 0 0 20rpx 3rpx #ccc;
	padding: 20rpx;

	.suggest-add-con-item {
		display: flex;
		border-bottom: #f3f2f2 0.3rpx solid;
		justify-content: space-between;
		height: 80rpx;
		line-height: 80rpx;

		.suggest-add-img {
			image {
				width: 35rpx;
				height: 35rpx;
				vertical-align: middle;
			}
		}
	}

	.suggest-add-con-itemList {
		margin: 10rpx 0;

		.suggest-add-con-itemList-input {
			margin-top: 10rpx;
		}
	}
}

.uni-textarea-wrapper {
	height: 150rpx;
}

.fonColor {
	color: #898989;
}

.add_suggest_btn {
	margin-top: 30rpx !important;
	height: 68rpx;
	line-height: 68rpx;
	text-align: center;
	color: #fff;
	width: 98%;
	margin: 20rpx auto;
	background-color: #02a7f0;
	border-radius: 30rpx;
}

.ggg {
	background-color: #c5c5c5 !important;
}

.wrap {
	border-radius: 30rpx;
	background-color: #373737;
	color: #fff;
	position: fixed;
	top: 50%;
	left: 50%;
	width: 300rpx;
	height: 200rpx;
	transform: translate(-50%, -50%);
}
</style>
